import React, { ReactNode } from 'react';
import { Table, Card } from 'antd';
import PateoSearchForm from '../PateoSearchForm';

export default class SearchTable extends React.Component<
  {
    tableProps: {
      onSource(page: number, size: number, args: any): Promise<any>;
    } & { [key: string]: any };
    searchProps?: { searchItems: Array<any> } & { [key: string]: any };
    children?: ReactNode;
    initRefresh?: boolean;
  },
  any
> {
  static defaultProps = {
    initRefresh: true,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      page: 1,
      size: 10,
      total: 0,
      dataSource: [],
      loading: false,
    };
  }
  componentDidMount() {
    if (this.props.initRefresh) {
      return this.onChange({ current: this.state.page, pageSize: this.state.size });
    }
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  refresh = (page = 1, size = 10) => {
    this.onChange({ current: page || this.state.page, pageSize: size || this.state.size });
  };

  onChange = async ({ current, pageSize }) => {
    this.state.page = current;
    this.state.size = pageSize;
    this.setState({ loading: true });

    const { data, total } = await this.props.tableProps.onSource(
      this.state.page,
      this.state.size,
      this.searchRef?.current?.getFieldsValue() || {},
    );

    this.setState({
      loading: false,
      dataSource: data,
      total: total,
    });
  };

  render() {
    // @ts-ignore
    const table = (
      <>
        {this.props.tableProps.top}
        <Table
          onChange={this.state.total ? this.onChange : undefined}
          dataSource={this.state.dataSource}
          pagination={{
            showLessItems: true,
            size: 'small',
            showTotal: total => `共 ${total} 条`,
            showSizeChanger: true,
            showQuickJumper: true,
            pageSizeOptions: ['5', '10', '20', '30', '40', '50'],

            total: this.state.total,
            current: this.state.total ? this.state.page : undefined,
            pageSize: this.state.total ? this.state.size : undefined,
          }}
          loading={this.state.loading}
          {...this.props.tableProps}
        />
        {this.props.tableProps.bottom}
      </>
    );

    return (
      <div>
        {this.props.searchProps?.searchItems ? (
          <Card bordered={false}>
            <PateoSearchForm
              fetchParams={{}}
              handleFormReset={() => {
                this.props.searchProps?.resetItem();
                this.refresh();
                return false;
              }}
              handleFieldsValue={(val: any) => {
                this.refresh();
                return false;
              }}
              {...this.props.searchProps}
              onRef={e => {
                this.searchRef = e;
                this.props.searchProps &&
                  this.props.searchProps.onRef &&
                  this.props.searchProps.onRef(e);
              }}
              x={{}}
            />
          </Card>
        ) : null}
        {this.props.children}
        {this.props.searchProps?.searchItems ? (
          <Card bordered={false} style={{ marginTop: 12 }}>
            {table}
          </Card>
        ) : (
          table
        )}
      </div>
    );
  }
}
